<template>
  <div id="site-theme" :class="{'theme-setting-open': themeSettingOpen}">
    <h2>布局样式</h2>
    <div>
      <h3>顶部导航条</h3>
      <el-radio-group v-model="navbarLayoutType">
        <el-radio label="default" >白色</el-radio>
        <el-radio label="inverse" >鲜艳</el-radio>
      </el-radio-group>
    </div>
    <div>
      <h3>侧边栏</h3>
      <el-radio-group v-model="sidebarLayoutSkin">
        <el-radio label="light">白色</el-radio>
        <el-radio label="dark">黑暗</el-radio>
      </el-radio-group>
    </div>
    <div>
      <h3>主题</h3>
      <el-radio-group v-model="themeColor">
        <el-radio   v-for="item in skinList" :label="item.color" :key="item.name">
          <span class="t-capitalize">{{ item.name }}</span> {{ item.remark }}
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
  import { toggleClass, addStyle } from '@/utils/index.js'
  export default {
    data () {
      return {
        // 皮肤, 列表

        /* eslint-disable */
        skinList: [
          { name: 'blue'     , color: '3E8EF7', remark: '蓝色' },
          { name: 'brown'    , color: '997B71', remark: '棕色' },
          { name: 'cyan'     , color: '0BB2D4', remark: '青色' },
          { name: 'gray'     , color: '757575', remark: '灰色' },
          { name: 'green'    , color: '11C26D', remark: '绿色' },
          { name: 'indigo'   , color: '667AFA', remark: '靛青色' },
          { name: 'orange'   , color: 'EB6709', remark: '橙色' },
          { name: 'pink'     , color: 'F74584', remark: '粉红色' },
          { name: 'purple'   , color: '9463F7', remark: '紫色' },
          { name: 'red'      , color: 'FF4C52', remark: '红色' },
          { name: 'turquoise', color: '17B3A3', remark: '蓝绿色' },
          { name: 'yellow'   , color: 'FCB900', remark: '黄色' }
        ]
      }
    },
    computed: {
      navbarDom () { return document.getElementById('J_navbar') },
      navbarbodyDom () { return document.getElementById('J_navbar_body') },
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType },
        set (val) {
          this.$store.commit('common/updateNavbarLayoutType', val)
          if (this.navbarLayoutType === 'default') {  // 白色背景
            addStyle(this.navbarbodyDom, { background: 'white' })
          } else {  // 鲜艳的
            addStyle(this.navbarbodyDom, { background: '' })
          }
        }
      },
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin },
        set (val) { this.$store.commit('common/updateSidebarLayoutSkin', val) }
      },
      themeSettingOpen: {
        get () { return this.$store.state.common.themeSettingOpen }
      },
      themeColor: {
        get () { return this.$store.state.common.themeColor },
        set (val) {
          this.$store.commit('common/updateThemeColor', val)
          toggleClass(document.body, 'custom-' + this.themeColor)
          addStyle(this.navbarDom, { background: '#' + this.themeColor })
        }
      }
    },
    watch: {},
    mounted () {
      toggleClass(document.body, 'custom-' + this.themeColor)
      addStyle(this.navbarDom, { background: '#' + this.themeColor })
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  h2 {
    text-align: center;
  }
  #site-theme {
    position: absolute;
    right: -300px;
    top: 70px;
    z-index: 999;
    padding: 5px 20px;
    width: 230px;
    height: 600px;
    background: white;
    transition: right 0.5s;
    // border: 1px solid #999;
    box-shadow: 0 0 5px rgb(134, 126, 126);
    .el-radio {
      margin: 5px 1em;
    }
  }
  #site-theme.theme-setting-open {
    right: 0;
  }

</style>
